<template>
  <view class="root">
    <view class="inner">
      <view class="top">
        <u-input v-model="imeiValue" :placeholderStyle="placeholderStyle" placeholder="手动输入设备IMEI码" class="search-input"
          :custom-style="inputStyle"></u-input>
      </view>
      <view class="bottom">
        <u-button text="确定" :custom-style="scanStyle" @click="handleClick"></u-button>
      </view>
      <view class="describe">
        说明：
      </view>
      <view class="z-text">
        请输入腕表盒身上的IMEI码。
      </view>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    helpinfoBingding
  } from '../api/api';
  import {
    Toast,
    getOptionsParams
  } from '../utils/util';

  export default {
    data() {
      return {
        $baseImgUrl: this.$baseImgUrl,
        placeholderStyle: {
          'font-weight': 400,
          'font-size': '28rpx',
          color: '#A1A1A1'
        },
        scanStyle: {
          width: '680rpx',
          height: '96rpx',
          background: 'linear-gradient( 90deg, #51B1FF 0%, #1790F2 100%)',
          'border-radius': '48rpx 48rpx 48rpx 48rpx',
          'font-weight': 500,
          'font-size': '36rpx',
          color: '#FFFFFF',
          'margin-bottom': '54rpx',
          'margin-top': '100rpx'
        },
        inputStyle: {
          width: '680rpx',
          height: '96rpx',
          background: '#F4F5F7',
          'box-shadow': 'inset 0rpx 3rpx 6rpx 1rpx rgba(0,0,0,0.16)',
          'border-radius': '48rpx 48rpx 48rpx 48rpx'
        },
        routerParams: {},
        imeiValue: ''
      }
    },
    onLoad(options) {
      this.routerParams = getOptionsParams(options)
      this.imeiValue = this.routerParams.imei
    },
    methods: {
      handleClick() {
        helpinfoBingding({
            imei: this.imeiValue ? this.imeiValue.trim() : '',
            mentalPatientPersonId: this.routerParams.id,
            type: 1
          })
          .then((res) => {
            Toast('绑定成功！')
            setTimeout(() => {
              uni.$emit('bind-success')
              uni.navigateBack({
                delta: 2
              })
            }, 250)
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .root {
    width: 100%;
    height: 100%;
    background: #F9F9F9;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    padding: 10rpx 16rpx;

    .inner {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background: #FFFFFF;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      padding: 46rpx 19rpx;
    }

    .top {}

    .bottom {
      flex-shrink: 0;
      padding-bottom: 86rpx;

      /deep/.u-button__text {
        font-weight: 500;
        font-size: 36rpx !important;
      }
    }

    .describe {
      font-weight: bold;
      font-size: 30rpx;
      color: #000000;
    }

    .z-text {
      font-weight: 500;
      font-size: 26rpx;
      color: #1A1A1A;
      margin-top: 18rpx;
    }
  }
</style>